<template>
<div class="coupon-client-new views-container">
    <div class="flex-row flex-justify-b">
        <div class="wlm-form" style="flex-grow: 1;margin-right: 20px;">
            <div class="wlm-form-header">推送消息</div>
            <div class="wlm-form-content table-content">
                <el-form ref="orther" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="130px" class="retail-form" label-position="right">
                    <el-form-item label="模板">
                        <el-select size="small" @change="typeChange" v-model="formFormatData.formData.template_id">
                            <el-option v-for="(item) in categoryData" :key="item.template_id" :label="item.title" :value="item.template_id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label=" ">
                        <div class="el-card box-card is-always-shadow" v-if="example">
                            <div class="el-card__body">
                                <p class="title orders-red">案例：</p>
                                <div v-html="example"></div>
                            </div>
                        </div>
                        <div class="el-card box-card is-always-shadow">
                            <div class="el-card__body">
                                <p class="title orders-red">注意事项：</p>
                                <p>涉及红包，卡券，优惠卷，代金劵，会员卡类消息模版，属于违规。 例如，你有一张优惠卷未领取/你有一红包等等</p>
                            </div>
                        </div>
                        <div class="el-card box-card is-always-shadow">
                            <div class="el-card__body">
                                <p class="title orders-red">可用变量：</p>
                                <p>[$name]：微信昵称</p>
                                <p>[$time]：时间</p>
                            </div>
                        </div>
                        <div class="el-card box-card is-always-shadow" v-if="formFormatData.formData.values.length>0">
                            <div class="el-card__body">
                                <el-form-item v-for="(item, index) in formFormatData.formData.values" :key="index" :label="item.title" label-width="80px">
                                    <div class="flex-row flex-align-c">
                                        <el-input v-model="item.value" placeholder="此项必填否则可导致推送失败"></el-input>
                                        <el-color-picker style="margin-left:20px;" v-model="item.color"></el-color-picker>
                                    </div>
                                </el-form-item>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="消息标题">
                        <el-input v-model="formFormatData.formData.title" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="链接">
                        <el-input v-model="formFormatData.formData.url" placeholder=""></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="小程序链接(可不填)">
                        <el-input v-model="formFormatData.formData.sapp_url" placeholder=""></el-input>
                    </el-form-item> -->
                </el-form>
            </div>
        </div>
    </div>
    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" @click="formFormatSubmit({ router: { type: 'replace', path: '/application/imgMsgList', code: 1 }})" type="primary">提交</el-button>
        <router-link tag="span" to="/application/imgMsgList">
            <el-button size="small">返回</el-button>
        </router-link>
    </div>
</div>
</template>

<script>
import {
  templateLists,
  templateShow,
  templateSave
} from '@/api/application'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'CouponClientNew',
  components: {
  },
  computed: {
  },
  created() {
    templateLists().then((response) => {
      const {
        data: {
          data: msgData = []
        }
      } = response
      this.categoryData = msgData
      console.log(this.categoryData, 'categoryData')
    })
  },
  data() {
    return {
      content: { first: { title: 'first:', value: '', color: '#000000' }, keyword1: { title: 'keyword1:', value: '', color: '#000000' }, keyword2: { title: 'keyword2:', value: '', color: '#000000' } },
      example: '',
      categoryData: [],
      formFormatData: {
        key: ['orther'],
        api: {
          editForm: {
            api: templateShow,
            params: {
              id: ''
            //   always: true
            },
            redirect: 't_id'
          },
          submitForm: templateSave
        },
        formData: {
          values: [],
          template_id: '',
          title: '',
          sapp_url: '',
          url: ''
        },
        rules: {}
      }
    }
  },
  mounted() {
    // var myMap = new Map()
    // myMap.set(1, 'black')
    // myMap.set(3, 'red')
    // console.log(myMap)
    // this.myMap = myMap
  },
  methods: {
    typeChange(val) {
      console.log(val)
      const indexFind = this.categoryData.findIndex(item => {
        return item.template_id === val
      })
      if (indexFind !== -1) {
        console.log(this.categoryData[indexFind])
        this.example = this.categoryData[indexFind]['example']
        this.formFormatData.formData.values = this.categoryData[indexFind]['content']
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.coupon-client-new {
    .box-card {
        background-color: #f5f5f5;
        font-size: 14px;
        margin-bottom: 20px;
        color: #606266;
    }
}
</style>
